import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:kxy_flutter_app/model/course_category.dart';
import 'package:kxy_flutter_app/view/course/course_list_View.dart';

class CourseCateView extends StatefulWidget {
  final List<CourseCategory> cateList;

  const CourseCateView({Key key, this.cateList}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return CourseCateViewState();
  }
}

class CourseCateViewState extends State<CourseCateView> {
  String checkedCateId;

  @override
  void initState() {
    if (widget.cateList.length > 0) {
      checkedCateId = widget.cateList[0].id;
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('课程筛选')),
      body: Builder(
        builder: (cxt) {
          if (widget.cateList.length == 0) {
            return Center(
              child: Text('还没有分类噢~'),
            );
          }
          return Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Row(
              children: [
                rootCateListWidget(),
                Expanded(child: subCateListWidget()),
              ],
            ),
          );
        },
      ),
    );
  }

  Decoration get unCheckDecoration {
    return BoxDecoration(
      color: Color.fromRGBO(245, 245, 245, 1),
      border: Border(
        top: BorderSide(
          color: Color.fromRGBO(240, 240, 240, 1),
        ),
        right: BorderSide(
          color: Color.fromRGBO(240, 240, 240, 1),
        ),
      ),
    );
  }

  Decoration get checkedDecoration {
    return BoxDecoration(
      color: Colors.white,
    );
  }

  TextStyle get checkedTextStyle {
    return TextStyle(
      color: Theme.of(context).primaryColor,
      fontWeight: FontWeight.bold,
    );
  }

  TextStyle get unCheckTextStyle {
    return TextStyle(
      color: Colors.black54,
      fontWeight: FontWeight.normal,
    );
  }

  Widget rootCateListWidget() {
    return Container(
      width: MediaQuery.of(context).size.width / 2.2,
      child: ListView(
        children: widget.cateList.map((cate) {
          var isChecked = cate.id == checkedCateId;
          var textStyle = isChecked ? checkedTextStyle : unCheckTextStyle;
          return GestureDetector(
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 20),
              alignment: Alignment.center,
              child: Text(cate.name, style: textStyle),
              decoration: isChecked ? checkedDecoration : unCheckDecoration,
            ),
            onTap: () {
              setState(() {
                checkedCateId = cate.id;
              });
            },
          );
        }).toList(),
      ),
    );
  }

  Widget subCateListWidget() {
    var rootCate = widget.cateList.singleWhere((x) => x.id == checkedCateId);
    var subCateList = rootCate.children;

    return Container(
      color: Colors.white,
      child: ListView(
        padding: EdgeInsets.symmetric(horizontal: 10),
        children: subCateList.map((cate) {
          return subCateItem(cate);
        }).toList(),
      ),
    );
  }

  Widget subCateItem(CourseCategory cate) {
    return GestureDetector(
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 20),
        alignment: Alignment.center,
        color: Colors.white,
        child: Text(
          cate.name,
          overflow: TextOverflow.ellipsis,
        ),
      ),
      onTap: () {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (cxt) => CourseListView(cateId: cate.id),
          ),
        );
      },
    );
  }
}
